<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>学生成绩管理系统 - 成绩管理</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/all.min.css" rel="stylesheet">
    <style>
        .sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 48px 0 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
            background-color: #f8f9fa;
        }
        .sidebar-sticky {
            position: relative;
            top: 0;
            height: calc(100vh - 48px);
            padding-top: .5rem;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .main-content {
            margin-left: 240px;
            padding: 20px;
        }
        .nav-link {
            color: #333;
            padding: 10px 20px;
        }
        .nav-link:hover {
            background-color: #e9ecef;
        }
        .nav-link.active {
            background-color: #007bff;
            color: white;
        }
        .nav-link i {
            margin-right: 10px;
        }
        .table th {
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">学生成绩管理系统</a>
            <div class="d-flex">
                <span class="navbar-text me-3">
                    欢迎，${sessionScope.user.username}
                </span>
                <button class="btn btn-outline-light" onclick="logout()">退出</button>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <nav class="col-md-3 col-lg-2 d-md-block sidebar">
                <div class="sidebar-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="index.jsp">
                                <i class="fas fa-home"></i>首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="grade.jsp">
                                <i class="fas fa-chart-bar"></i>成绩管理
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <main class="main-content">
                <div class="container">
                    <h2 class="mb-4">成绩管理</h2>
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>学号</th>
                                            <th>中文名</th>
                                            <th>英文名</th>
                                            <th>电话</th>
                                            <th>班级</th>
                                            <th>学期</th>
                                            <th>期中成绩</th>
                                            <th>期末成绩</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="studentList">
                                        <!-- 学生列表将通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 编辑成绩模态框 -->
    <div class="modal fade" id="editGradeModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑成绩</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editGradeForm">
                        <input type="hidden" id="editStudentId">
                        <div class="mb-3">
                            <label class="form-label">期中成绩</label>
                            <input type="number" class="form-control" id="editMidMarks" min="0" max="100" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">期末成绩</label>
                            <input type="number" class="form-control" id="editEndMarks" min="0" max="100" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateGrade()">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
        function logout() {
            $.post('${pageContext.request.contextPath}/user/logout', function() {
                window.location.href = '${pageContext.request.contextPath}/login.jsp';
            });
        }

        // 加载学生列表
        function loadStudents() {
            $.get('${pageContext.request.contextPath}/student/list', function(students) {
                const classStudents = students.filter(student => 
                    student.stuClass === '${sessionScope.user.username}'
                );
                const tbody = $('#studentList');
                tbody.empty();
                classStudents.forEach(student => {
                    tbody.append(`
                        <tr>
                            <td>${student.studentId}</td>
                            <td>${student.chineseName}</td>
                            <td>${student.englishName}</td>
                            <td>${student.tel}</td>
                            <td>${student.stuClass}</td>
                            <td>${student.semester}</td>
                            <td>${student.midMarks || '-'}</td>
                            <td>${student.endMarks || '-'}</td>
                            <td>${student.status}</td>
                            <td>
                                <button class="btn btn-sm btn-primary" onclick="editGrade('${student.studentId}', ${student.midMarks || 0}, ${student.endMarks || 0})">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                            </td>
                        </tr>
                    `);
                });
            });
        }

        // 编辑成绩
        function editGrade(studentId, midMarks, endMarks) {
            $('#editStudentId').val(studentId);
            $('#editMidMarks').val(midMarks);
            $('#editEndMarks').val(endMarks);
            new bootstrap.Modal(document.getElementById('editGradeModal')).show();
        }

        // 更新成绩
        function updateGrade() {
            const studentId = $('#editStudentId').val();
            const midMarks = $('#editMidMarks').val();
            const endMarks = $('#editEndMarks').val();

            $.ajax({
                url: '${pageContext.request.contextPath}/student/update',
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify({
                    studentId: studentId,
                    midMarks: midMarks,
                    endMarks: endMarks
                }),
                success: function(response) {
                    if (response.success) {
                        bootstrap.Modal.getInstance(document.getElementById('editGradeModal')).hide();
                        loadStudents();
                        alert('成绩更新成功！');
                    } else {
                        alert('成绩更新失败：' + response.message);
                    }
                },
                error: function() {
                    alert('成绩更新失败，请稍后重试！');
                }
            });
        }

        // 页面加载完成后加载数据
        $(document).ready(function() {
            loadStudents();
        });
    </script>
</body>
</html> 